<template>
  <div>
    <el-row type="flex" justify="space-between" align="middle" class="content">
      <el-row>
        <el-row type="flex" justify="center" align="middle" class="rate">
          100.34<span>%</span>
        </el-row>
        <el-row type="flex" justify="space-between" class="info">
          <div>
            <div class="text-gradient">本年预算</div>
            <div>58,100</div>
          </div>
          <div>
            <div class="text-gradient">本年累计</div>
            <div>78,000</div>
          </div>
          <div>
            <div class="text-gradient">本月实际</div>
            <div>0</div>
          </div>
        </el-row>
        <el-row type="flex" justify="space-around">
          <div>同比 <i class="el-icon-caret-top red"></i> 0%</div>
          <div>环比 <i class="el-icon-caret-bottom green"></i> 0%</div>
        </el-row>
      </el-row>
      <div class="bn-chart-box pointer" @click="show = true">
        <div>数据口径：每月末的累计投资预算完成率</div>
        <div class="bn-chart" ref="bnChart"></div>
      </div>
    </el-row>

    <!-- 部门投资预算完成情况 -->
    <el-dialog
      append-to-body
      :visible.sync="show"
      width="1430px"
      custom-class="cockpit-container cockpit-dialog financial-table-modal"
    >
      <template #title>
        <div class="title">
          <span>部门投资预算完成情况</span>
        </div>
      </template>
      <DetailModal />
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import DetailModal from "./DetailModal.vue";

export default {
  name: "ProductInfo",
  components: { DetailModal },
  data() {
    return {
      show: false,
      myNyChart: null,
      list: [
        { name: 1, value: 5.16 },
        { name: 2, value: 5.16 },
        { name: 3, value: 5.16 },
        { name: 4, value: 5.16 },
        { name: 5, value: 12.05 },
        { name: 6, value: 12.05 },
        { name: 7, value: 18.93 },
        { name: 8, value: 18.93 },
        { name: 9, value: 25.82 },
        { name: 10, value: 25.82 },
        { name: 11, value: 0 },
        { name: 12, value: 0 },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const list = this.list;
      const option = {
        grid: { left: 35, right: 0, bottom: 55, top: 20 },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#ACB6C7",
            formatter: (value) => value + "月",
          },
          axisTick: { show: false },
          axisLine: { lineStyle: { color: "#6C8097" } },
          data: list.map((i) => i.name),
        },
        yAxis: [
          {
            type: "value",
            axisLabel: { color: "#ACB6C7" },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: {
              lineStyle: { type: "dashed", color: " rgba(108,128,151,0.3)" },
            },
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            label: {
              show: true,
              position: "top",
              color: "#FFFFFF",
              fontSize: 14,
              formatter: (data) => {
                if (!data.value) return "";
                return data.value + "%";
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: "#159AFF" },
                  { offset: 0.96, color: "rgba(0,58,255,0)" },
                  { offset: 1, color: "#159AFF" },
                ]),
              },
            },
            barWidth: 16,
            data: list,
          },
        ],
      };
      this.myNyChart = echarts.init(this.$refs.bnChart);
      this.myNyChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 295px;
  padding: 0 24px 0 50px;
  .rate {
    width: 220px;
    height: 129px;
    padding-bottom: 45px;
    font-size: 36px;
    font-family: DIN Alternate, DIN Alternate;
    font-weight: bold;
    color: #ffffff;
    background: url("~@/assets/cockpit/product_rate_bg.png") no-repeat center /
      contain;
    span {
      padding-top: 14px;
      font-size: 16px;
    }
  }
  .info {
    padding: 18px 0;
    text-align: center;
    font-size: 20px;
    font-family: DIN, DIN;
    font-weight: bold;
    color: #ffffff;
    .text-gradient {
      padding-bottom: 4px;
    }
  }
  .bn-chart-box {
    align-self: flex-end;
    text-align: right;
    .bn-chart {
      width: 690px;
      height: 240px;
    }
  }
}
</style>
